<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>{% block title %}{{ the_title }}{% endblock %}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- styles -->
    {% load static %}
    <link rel="stylesheet" href="{% static "css/bootstrap.css" %}">
    <style type="text/css">
        body {
            padding-top: 60px;
            padding-bottom: 40px;
        }
    </style>

    <link rel="stylesheet" href="{% static "css/bootstrap-responsive.css" %}">
    <link rel="stylesheet" href="{% static "css/docs.css" %}">
    <link rel="stylesheet" href="{% static "css/style.css" %}">
    <link rel="stylesheet" href="{% static "js/google-code-prettify/prettify.css" %}">
    <link rel="stylesheet" href="{% static "css/datepicker.css" %}">

    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    <script src="{% static "js/jquery.js" %}"></script>
    <script src="{% static "js/bootstrap-transition.js" %}"></script>
    <script src="{% static "js/bootstrap-alert.js" %}"></script>
    <script src="{% static "js/bootstrap-modal.js" %}"></script>
    <script src="{% static "js/bootstrap-dropdown.js" %}"></script>
    <script src="{% static "js/bootstrap-scrollspy.js" %}"></script>
    <script src="{% static "js/bootstrap-tab.js" %}"></script>
    <script src="{% static "js/bootstrap-tooltip.js" %}"></script>
    <script src="{% static "js/bootstrap-popover.js" %}"></script>
    <script src="{% static "js/bootstrap-button.js" %}"></script>
    <script src="{% static "js/bootstrap-collapse.js" %}"></script>
    <script src="{% static "js/bootstrap-carousel.js" %}"></script>
    <script src="{% static "js/bootstrap-typeahead.js" %}"></script>
    <script src="{% static "js/jquery.validate.min.js" %}"></script>
    <script src="{% static "js/registration_form.js" %}"></script>
    <script src="{% static "js/bootstrap-typeahead.js" %}"></script>
    <script src="{% static "js/bootstrap-affix.js" %}"></script>
    <script src="{% static "js/bootstrap-datepicker.js" %}"></script>
    <script src="{% static "js/application.js" %}"></script>
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="{% static "img/icon.png" %}">
    <script>
        $(function () {
            if (isIE()&&!isIE9()){
                alert("Dear visitor, IE8 or its older versions cannot support some amazing features of this site." +
                        " In order to get the best effect, we encourage you to use Firefox, Chrome or Safari to visit our site. " +
                        "If you are using IE9 and still see this message, please turn off compatible view. Thanks.");
            }
        });
        function isIE(){
            return navigator.appName.indexOf("Microsoft Internet Explorer")!=-1 && document.all;
        }
        function isIE9(){
            return navigator.userAgent.split(";")[1].toLowerCase().indexOf("msie 9.0")=="-1"?false:true;
        }
    </script>
    {% block script %}
    {% endblock %}
</head>

<body>
<!----------------------------------------------------------- top bar -->
{% block navigationBar %}
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">

                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a class="brand" href="#">NTUSurvey</a>

                <div class="nav-collapse" id="navibar" style="padding-left: 0px;padding-right: 0px;">
                    {% block navibar %}

                        <ul class="nav pull-right">
                            <li>
                                {% if user.is_authenticated %}
                                    <a href="/account">Dashboard</a>

                                {% else %}
                                    <a href="/"><i class="icon-home"></i>Home</a>
                                {% endif %}
                            </li>

                            <li><a href="/about">About</a></li>
                            <li class="dropdown">
                                {% if user.is_authenticated %}
                                    <a href="/account" id="drop3" role="button" class="dropdown-toggle"
                                       data-toggle="dropdown">{{ user.username }} <b class="caret"></b></a>
                                    <ul class="dropdown-menu" role="menu" aria-labelledby="username">
                                        {% if not user.is_staff %}
                                            <li><a href="/account/edit_profile">Edit Profile</a></li>
                                            <li class="divider"></li>
                                        {% endif %}
                                        <li><a href="/account/change_password">Change Password</a></li>
                                        <li><a tabindex="-1" href="/account/logout">Log out</a></li>
                                    </ul>

                                {% else %}
                                    <a href="/account/login">Log in</a>
                                {% endif %}


                            </li>

                        </ul>
                    {% endblock %}
                </div>
                <!--/.nav-collapse -->

            </div>
        </div>
    </div>
{% endblock %}
<!------------------------------------------------------end of top bar-->
{% block userPannel %}
    <br> <br>

    <style type="text/css">

        body {
            background: url({{ STATIC_URL }}img/grass.jpg);
            background-repeat: no-repeat;
            background-size: cover;
        }

    </style>

    <style xmlns="http://www.w3.org/1999/html">
        a:link {
            color: #000000;
        }

        a:hover {
            color: #ff4500;
        }
    </style>
{% endblock %}

{% block print %}
<div class="container ">
    <div class="row hero-unit">
        {% block content %}{% block surveyPannel %}{% endblock %} {% endblock %}

    </div>


</div>

<div class="row">{% block endbar %}{% endblock %}</div>
{% endblock %}

<!-- /container -->
<!----------------------------------------        footer--------------->
{% block footer %}
<footer class="footer">
    <div class="container">
        <!--  row of columns -->
        <div class="row centre">
            <div class="span4">
                {% block social %}{% endblock %}
            </div>
            <div class="span4">

                <ul class="footer-links">

                    <li><img src="{% static "img/logo.png" %}" alt=""></li>
                </ul>
            </div>
            <div class="span4">

                
            </div>
            <script>
                $("#set_lang_select").change(function () {
                    $('#lang_form').submit();
                });
            </script>
        </div>
    </div>
</footer>
{% endblock %}
<!-----------------------------------------------end of footer---------->

    <script type="text/javascript">

        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-36155549-1']);
        _gaq.push(['_trackPageview']);

        (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();

    </script>

</body>
</html>